<template>
    <div class="common-layout">
        <el-container class="common-container">
            <el-header class="header-item flex-center">
                <div class=" flex-center">
                    <div class="header-img">
                        <img :src="Logo" alt="logo">
                    </div>
                    <div class="diviver">|</div>
                    <div class="title">战略微头条</div>
                </div>
                <div class="flex-center">
                    <div>
                        <el-dropdown placement="bottom">
                            <el-button> 用户中心 </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                    <div class="m-8">
                        <el-dropdown placement="bottom">
                            <el-button> 语言设置 </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>中文</el-dropdown-item>
                                    <el-dropdown-item>英文</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px" height="100%" class="aside">
                    <el-menu router>
                        <el-menu-item index="NewsPool">
                            新闻池
                        </el-menu-item>
                        <el-menu-item index="PressRelease">
                            新闻发布
                        </el-menu-item>
                        <el-menu-item index="NewsHasBeenReleased">
                            已发布新闻
                        </el-menu-item>
                        <el-menu-item index="Internationalization">
                            国际化
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main class="content-main">
                    <el-card class="flex-1" style="height: 100%;">
                        <el-page-header @back="router.back">
                            <template #content>
                                <div class="flex ">
                                    <div class="text-large font-600 mr-3"> {{ route.name }} </div>
                                    <div v-if="route.name === 'PressRelease'"
                                        class="text-medium font-500 flex-end text-gray-500" @click="router.push('preview')">预览</div>
                                </div>
                            </template>
                        </el-page-header>
                        <div class="p-[20px] bg-gray-100 overflow-auto">
                            <router-view class="bg-white p-[10px]"></router-view>
                        </div>
                    </el-card>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import Logo from '@/assets/logo.png'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

router.afterEach((to, from) => {
    // console.log(to.name)
})

const handleLogout = () => {
    localStorage.removeItem('userInfo')
    router.push('/login')
}



</script>

<style scoped>
.common-layout {
    height: 100vh;
}

.common-container {
    height: 100%;
}

.flex-center {
    display: flex;
    align-items: center;
}

.header-item {
    height: 60px;
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
}

.header-img img {
    height: 60px;
}

.aside {
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.diviver {
    margin: 0 10px;
    font-size: 20px;
    color: #dcdfe6;
}

.title {
    font-size: 20px;
    color: #303133;
    font-weight: bold;
}

.content-main {
    overflow-x: hidden;
    flex: 1;
}
</style>
